import  React from  "react";
import { connect } from "react-redux";
import { notification } from 'antd'
import "./login.css"
import BGParticle from "../../utils/BGParticle";

import {getCodeImg,login} from "../../api/login";
import { encrypt } from '@/utils/rsaEncrypt';

/**
 * 登陆页面
 */
class Login extends React.Component{

    constructor(props) {
        super(props);
        this.userInfo = props.userInfo;
        this.token = props.token;
        this.state = {
            imageUrl:"",
            uuid:"",
            username:"",
            password:"",
            code:"",
            userInfo:this.state.userInfo.getState(),
            token:this.state.token.getState()
        }
    }

    componentDidMount () {
        // const isLogin = this.props.appStore
        // if(isLogin){
        //     this.props.history.go(1)     //当浏览器用后退按钮回到登录页时，判断登录页是否登录，是登录就重定向上个页面
        //     // this.props.appStore.toggleLogin(false) //也可以设置退出登录
        // }
        this.initPage()
        //preloadingImages(imgs)  //预加载下一个页面的图片，预加载了第二次为什么还会去请求图片资源？
    }

    initPage(){
        //为什么写在then里？id为backgroundBox的DOM元素是在loading为false时才有，而上面的setState可能是异步的，必须等到setState执行完成后才去获取dom
        this.particle = new BGParticle('login-background')
        this.particle.init()
        notification.open({
            message:<ul><li>初始账号：admin</li><li>初始密码：123456</li></ul>,
            duration:0,
            className:'login-notification'
        })
       this.getCode()
    }

    /**
     * 获取验证码
     */
    getCode() {
        getCodeImg().then(res => {
            console.log("获取验证码res:",res)
            const {uuid,img} = res
            this.setState({
                imageUrl:img,
                uuid:uuid
            })
        })
    }

    /**
     * 登录
     */
    login(){
        const username  = this.username.value
        let password  = this.password.value
        const code  = this.code.value
        const {uuid} = this.state
        /**加密密码**/
        if (password) {
            password = encrypt(password)
        }
        login(username,password,code,uuid).then(res =>{
            console.log("登录结果res:",res)
            const {token,user} = res
            this.token.dispatch({state:token,type:"ADD_TOKEN"})
            this.userInfo.dispatch({state:user,type:"ADD_USER_INFO"})
        })
    }

    /**
     * 处理文字改变
     * @param key
     * @param val
     */
    handleChange(key,val){
        debugger
        console.log("val:",val)
        this.setState({
            [key]:val
        })
    }
    handleChanged(ev){
        console.log(ev)
    }

    /**
     * 切换登录注册页面
     */
    toPage(tag){
        const boxs = document.querySelectorAll(".box")
        if (tag === "login") { //登录页面
            boxs[0].classList.add("active")
            boxs[1].classList.remove("active")
        } else { //注册页面
            boxs[0].classList.remove("active")
            boxs[1].classList.add("active")
        }
    }
    register(){

    }

    render() {

        return (
            <div className="login-page">
                <div id="login-background"></div>
                <div className="login-container">
                    <div className="box active">
                        <div className="content">
                            <h3 className="title">管理员登录</h3>
                            <form className="form">
                                <div className="form-row">
                                    <label className="icon icon-avatar"></label>
                                    <input className="username" type="text" name="username" placeholder="用户名" ref={el => this.username = el}/>
                                </div>
                                <div className="form-row">
                                    <label className="icon icon-password"></label>
                                    <input className="password" type="password" name="password" placeholder="密码"  ref={el => this.password = el}/>
                                </div>
                                <div className="form-row" style={{display:"flex",alignItems:"center"}}>
                                    <label className="icon icon-security"></label>
                                    <input className="code-input" type="text" name="code" placeholder="验证码"  ref={el => this.code = el} />
                                    <img className="code" src={this.state.imageUrl} onClick={this.getCode.bind(this)}></img>
                                </div>
                                <div className="form-row">
                                    <div className="btn-box">
                                        <div className="login-btn" onClick={this.login.bind(this)}>登录</div>
                                        <div className="register-btn" onClick={this.toPage.bind(this,"register")}>注册</div>
                                    </div>
                                </div>
                            </form>
                            <div className="footer">欢迎登陆后台管理系统</div>
                        </div>
                    </div>
                    <div className="box">
                        <div className="content">
                            <h3 className="title">管理员注册</h3>
                            <form className="form">
                                <div className="form-row">
                                    <label className="icon icon-avatar"></label>
                                    <input className="username" type="text" name="username" placeholder="用户名"/>
                                </div>
                                <div className="form-row">
                                    <label className="icon icon-password"></label>
                                    <input className="password" type="text" name="password" placeholder="密码" />
                                </div>
                                <div className="form-row" style={{display:"flex",alignItems:"center"}}>
                                    <label className="icon icon-password"></label>
                                    <input className="confirm-password" type="text" name="password" placeholder="确认密码" />
                                </div>
                                <div className="form-row">
                                    <div className="btn-box">
                                        <div className="login-btn" onClick={this.register.bind(this)}>注册</div>
                                        <div className="register-btn" onClick={this.toPage.bind(this,"login")}>返回登录</div>
                                    </div>
                                </div>
                            </form>
                            <div className="footer">欢迎登陆后台管理系统</div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default connect({},{})(Login)
